﻿{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">封面图</label>
                                <div class="col-sm-6">
                                    <input type="file" id="img_file" accept="image/*" style="display: none">
                                    <input type="hidden" class="hidden_value" name="img" id="img" value="{$info['img']|default=''}"/>
                                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('img_file', 'img', 'form-uploaded-box-single', false, 1)">原图上传</div>
                                    <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box-single', 1)">裁剪上传</div>

                                    <div class="form-uploaded-box" id="form-uploaded-box-single" style="width: 140px">
                                        {if $info.img}
                                        <div class="form-uploaded-img-box">
                                            <img class="form-uploaded-box-img" src="{:getPicture($info.img)}" data-id="{$info.img}">
                                            <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview')"></i>
                                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                        </div>
                                        {/if}
                                    </div>
                                </div>

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-sm-1 col-form-label">链接类型</label>
                                <div class="col-sm-3">
                                    <select name="type" lay-filter="type">>
                                        <option value="1" {$info.type== 1 ?
                                        'selected' : ''}>文章</option>
                                        <option value="2" {$info.type== 2 ?
                                        'selected' : ''}>服务</option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item article-box" style="display: none">
                            <div class="form-group row layui-form">
                                <label class="col-sm-1 col-form-label">链接对象</label>
                                <div class="col-sm-3">
                                    <select name="article_id">
                                        <option value="0">请选择</option>
                                        {volist name="article_list" id="vo"}
                                        <option value="{$vo.id}" {$info.to_id== $vo.id ?
                                        'selected' : ''}>{$vo.title}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item service-box" style="display: none">
                            <div class="form-group row layui-form">
                                <label class="col-sm-1 col-form-label">链接对象</label>
                                <div class="col-sm-3">
                                    <select name="service_id">
                                        <option value="0">请选择</option>
                                        {volist name="service_list" id="vo"}
                                        <option value="{$vo.id}" {$info.to_id== $vo.id ?
                                        'selected' : ''}>{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}{include file="public/preview-img-mask" swiper-id="cropper-preview" /}{/block}

{block name="js"}
<script src="__STATIC__/layui/layui.js"></script>
<script>

    $(function () {
        var type = parseInt(`{$info.type}`)
        if (type == 1) {
            $('.article-box').show();
        } else {
            $('.service-box').show();
        }


        // layui监听type
        layui.use('form', function () {
            var form = layui.form;

            form.on('select(type)', function (data) {
                if (data.value == 1) {
                    $('.article-box').show();
                    $('.service-box').hide();
                } else {
                    $('.article-box').hide();
                    $('.service-box').show();
                }
            });
        })


    })
</script>{/block}